Vue Js String Substr Method: Vue.js is a JavaScript library that can be used to manipulate strings, including the ability to use its substr() method, which allows you to extract parts of a string based on the number of characters you specify The substr() method takes two parameters: the start index and the length of the substring to be extracted Use a negative start position to get the characters from the string’s end. For example, to extract the last three characters of a string, one can specify a start position of -3. Learn how to use string substr with Vue.js in the following tutorials:

How to extract a substring from a string in Vue.js?

In Vue.js, the substr() method extracts a portion of a string and can be used to extract characters from the beginning, middle, or end of a string.

Vue Js extract part of string | Example 1

<div id="app">
   <button @click="myFunction">click me</button>
   <p>Text: {{text}}</p>
   <p>Part of string :{{results}}</p>
</div>
<script type="module">
import { createApp } from 'vue'
createApp({
      data()
      { 
        return{ 
         text :'Font Awesome icons offer an easy way to integrate stylish graphics into webpages, with a huge library of over 1500 free vector icons and tutorials to help beginners learn more quickly',
         results:''
        } 
     }, 
     methods:{ 
         myFunction(){ 
            this.results = this.text.substr(0,18);
           },
          }
      }).mount('#app')
  </script>

Output of above example

n Vue Js, find a substring in a string at a given position

Vue.js provides a method to get part of string at given position this can be achieved by using string.substr(2,5) in Vue Js This method takes two parameters: the first parameter indicates the start index of the string, and the second parameter indicates the length of substring from the start index

Vue.Js String Substr Method at given position | Example 2

<div id="app">
  <button @click="myFunction">click me</button>
  <p>Text: {{text}}</p>
  <p>Part of string :{{results}}</p>
</div>
<script type="module">
import { createApp } from 'vue'
createApp({
      data()
      { 
        return{ 
         text :'Font Awesome Icons',
         results:''
        } 
     }, 
     methods:{ 
         myFunction(){ 
            this.results = this.text.substr(5,7);
           },
          }
      }).mount('#app')
  </script>

Output of above example